{include file="$header"}
<div id="app" v-cloak>
    <div class="el-login-wrapper">
        <div class="container">
            <div class="side">
                <div class="logo">
                    <img src="/admin/images/logo.png">
                </div>
                <div class="comments">
                框架易于功能扩展，代码维护，方便二次开发，帮助开发者简单高效降低二次开发成本，满足专注业务深度开发的需求。
                架构科学，轻松支持上千万数据、千万PV；支持全站静态化，动态页面局部静态化等为您快速建站，也是企业级项目产品原型的良好选择。
                插件应用与界面主题一键式开发程序，他将是您轻松建站的首选利器。
                </div>
                <div class="footer">
                    <a href="{:config('app.api')}" target="_blank">©&nbsp;onekeyadmin.com&nbsp;</a>
                    <a href="{:config('app.api')}/blog.html" target="_blank">论坛专区</a>
                    <a href="{:config('app.api')}/docs.html" target="_blank">帮助文档</a>
                    <a href="{:config('app.api')}/api/user/developer.html" target="_blank">认证成为开发者</a>
                </div>
            </div>
            <div class="form">
                <div class="title">管理员修改密码</div>
                <div class="ctitle">ADMIN CHANGE PASSWORD</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" @submit.native.prevent>
                    <template v-if="captchaShow">
                        <el-form-item v-if=" captcha !== '' " prop="captcha">
                            <img :src="captcha" @click="getCaptcha()" />
                            <el-input v-model="ruleForm.captcha" placeholder="请输入上方的图形验证码" @keyup.enter.native="getEmailCode()"></el-input>
                        </el-form-item>
                        <el-button :disabled="ruleForm.captcha.length === 4 ? false : true" @click="getEmailCode()" :loading="loading" plain>
                            验证
                        </el-button>
                    </template>
                    <template v-else>
                        <el-form-item prop="email">
                            <el-input v-model="ruleForm.email" prefix-icon="el-icon-user" placeholder="请输入邮箱" @input="showGetCode()" @keyup.enter.native="passwordChange()">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code" v-if="emailRegular">
                            <el-input style="width: 200px" v-model="ruleForm.code" prefix-icon="el-icon-user" placeholder="请输入邮箱验证码" @keyup.enter.native="passwordChange()">
                            </el-input>
                            <el-button style="width: 136px" @click="clickGetCode()" :disabled="now_interval !== 0">
                                {{now_interval === 0 ? '获取验证码' : now_interval+'秒后可重发'}}
                            </el-button>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="ruleForm.password" prefix-icon="el-icon-key" placeholder="请输入要修改的密码" show-password @keyup.enter.native="passwordChange()">
                            </el-input>
                        </el-form-item>
                        <el-button @click="passwordChange()" :loading="loading" plain>
                            修改密码
                        </el-button>
                        <div class="footer">
                            <a href="index">点击去登录</a>
                        </div>
                    </template>
                </el-form>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                captchaUrl: 'login/verify',
                emailCodeUrl: 'login/passwordEmailCode',
                passwordUrl: 'login/password',
                loading: false,
                captcha: "",
                captchaShow: false,
                emailRegular: false,
                now_interval: 0,
                interval: 60,
                timer: '',
                ruleForm: {
                    email: "",
                    password: "",
                    code: "",
                    captcha: "",
                },
                rules: {
                    email: [
                        { required: true, message: '请输入邮箱号', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            /**
             * 显示获取邮箱验证码
             */
            showGetCode() {
                let myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                this.emailRegular = myreg.test(this.ruleForm.email);
            },
            /**
             * 点击获取邮箱验证码
             */
            clickGetCode() {
                this.getCaptcha();
                this.ruleForm.captcha = "";
                this.captchaShow  = true;
            },
            /**
             * 获取邮箱验证码
             */
            getEmailCode() {
                let self = this;
                if (self.now_interval == 0) {
                    self.loading = true;
                    request.post(self.emailCodeUrl, {captcha: self.ruleForm.captcha, email: self.ruleForm.email}, function(res){
                        if (res.status === 'success') {
                            self.captchaShow  = false;
                            self.now_interval = 60;
                            self.timer        = setInterval(() => {
                                if (self.now_interval > 0) {
                                    self.now_interval--;
                                }
                            }, 1000);
                        } else {
                            self.getCaptcha();
                            self.ruleForm.captcha = "";
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        }
                        self.loading = false;
                    })
                }
            },
            /**
             * 获取验证码
             */
            getCaptcha() {
                this.captcha = url(this.captchaUrl, {rand: Math.random()});
            },
            /**
             * 修改密码
             */
            passwordChange() {
                let self = this;
                self.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        request.post(self.passwordUrl, self.ruleForm, function(res){
                            self.loading = false;
                            if (res.status === "success") {
                                self.$refs.ruleForm.resetFields();
                                self.$notify({ showClose: true, message: res.message, type: res.status, onClose:function(){location.href = url('login/index')}});
                            } else {
                                self.$notify({ showClose: true, message: res.message, type: res.status});
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    })
</script>
{include file="$footer"}